<template>
<div class="upload-group">
    <div class="upload-box">
        <el-upload class="avatar-uploader" :action="uploadAction" :headers="uploadHeader" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeUpload">
            <i v-if="!imageUrl" class="el-icon-plus avatar-uploader-icon"></i>
            <i v-else class="el-icon-edit avatar-uploader-icon"></i>
        </el-upload>
        <el-image v-if="imageUrl" :src="imageUrl" class="preview-image" :preview-src-list="[imageUrl]"></el-image>
    </div>
    <p class="warning">{{placeholder}}</p>
</div>
</template>

<script>
import {
    getToken
} from '@/utils/auth';

export default {
    name: "UploadPicture",
    props: {
        value: {
            type: String,
            default: function () {
                return [];
            },
        },
        placeholder: {
            type: String,
            default: "请选择附件",
        },
        fileType: {
            type: Array,
            default: function () {
                return [
                    'image/jpeg',
                    'image/png',
                    'image/gif',
                    'image/bmp',
                ];
            },
        },
        fileSize: {
            type: Number,
            default: function () {
                return 30
            },
        },
    },
    data() {
        let header = {};
        header["X-Token"] = getToken();

        return {
            uploadAction: process.env.VUE_APP_BASE_API + "/api/system.file/upload",
            uploadHeader: header,
            imageUrl: ''
        }
    },
    watch: {
        value: {
            immediate: true,
            handler(val) {
                console.log(val)
                this.imageUrl = val;
            },
        },
    },
    methods: {
        handleSuccess(res, file) {
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            }

            const newFile = {
                ext: res.data.extname,
                name: file.name,
                url: res.data.path,
            };

            this.imageUrl = res.data.path;
            this.$emit("input", this.imageUrl);
        },
        beforeUpload(file) {
            const isJPG = this.fileType.includes(file.type);

            const isLtM = file.size / 1024 / 1024 < this.fileSize;

            if (!isJPG) {
                this.$message.error("附件只能是 JPG,PNG,GIF,BMP 格式!");
            }

            if (!isLtM) {
                this.$message.error(`附件大小不能超过 ${this.fileSize}M!`);
            }

            return isJPG && isLtM;
        }
    }
}
</script>

<style lang="less">
.avatar-uploader {
    .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
        object-fit: cover;
    }
}

.warning {
    color: #C0C4CC;
}

.upload-box {
    display: flex;

    .preview-image {
        width: 100px;
        height: 100px;
        object-fit: cover;
        margin-left: 10px;
    }
}
</style>
